<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
  <title>确认下单-适配移动端</title>
</head>
<body>
  <div class="container">
    <div class="py-5 text-center">
      <div class="d-inline-flex align-items-center mb-4">
        <img class="mx-auto" src="logo.png" alt="" height="47">
        <h2 class="mb-0 ms-2">确认下单</h2>
      </div>
      <p class="lead">填写并核对订单信息</p>
    </div>
    <main>
      <div class="row g-5">
        <div class="col-md-7 col-lg-8 order-last order-md-first">
          <h4 class="mb-3">收货地址</h4>
          <form novalidate>
            <div class="row g-3">
              <div class="col-sm-6">
                <label for="username" class="form-label">收货人</label>
                <input type="text" class="form-control" id="username" placeholder="" value="" required>
                <div class="invalid-feedback">
                  请填写收货人
                </div>
              </div>
  
              <div class="col-sm-6">
                <label for="phone" class="form-label">手机号码</label>
                <input type="text" class="form-control" id="phone" placeholder="" value="" required>
                <div class="invalid-feedback">
                  请填写手机号码
                </div>
              </div>
  
              <div class="col-md-4">
                <label for="province" class="form-label">省份</label>
                <select class="form-select" id="province" required>
                  <option value="">--请选择--</option>
                  <option>河北省</option>
                </select>
                <div class="invalid-feedback">
                  请选择省份
                </div>
              </div>
  
              <div class="col-md-4">
                <label for="city" class="form-label">城市</label>
                <select class="form-select" id="city" required>
                  <option value="">--请选择--</option>
                  <option>石家庄市</option>
                </select>
                <div class="invalid-feedback">
                  请选择城市
                </div>
              </div>
  
              <div class="col-md-4">
                <label for="district" class="form-label">地区</label>
                <select class="form-select" id="district" required>
                  <option value="">--请选择--</option>
                  <option>长安区</option>
                </select>
                <div class="invalid-feedback">
                  请选择地区
                </div>
              </div>
  
              <div class="col-12">
                <label for="address" class="form-label">详细地址</label>
                <input type="text" class="form-control" id="address" placeholder="" required>
                <div class="invalid-feedback">
                  请填写详细地址
                </div>
              </div>
            </div>
  
            <div class="form-check mt-4">
              <input type="checkbox" class="form-check-input" id="save-info">
              <label class="form-check-label" for="save-info">设为默认收货地址</label>
            </div>
  
            <hr class="my-4">
  
            <h4 class="mb-3">支付方式</h4>
  
            <div class="my-3">
              <div class="form-check">
                <input id="wechatpay" name="paymentMethod" type="radio" class="form-check-input" checked required>
                <label class="form-check-label" for="wechatpay">微信支付</label>
              </div>
              <div class="form-check">
                <input id="alipay" name="paymentMethod" type="radio" class="form-check-input" required>
                <label class="form-check-label" for="alipay">支付宝支付</label>
              </div>
              <div class="form-check">
                <input id="credit" name="paymentMethod" type="radio" class="form-check-input" required>
                <label class="form-check-label" for="credit">信用卡</label>
              </div>
            </div>

            <hr class="my-4">

            <button class="w-100 btn btn-primary btn-lg" type="submit">提交订单</button>
          </form>
        </div>
        
        <div class="col-md-5 col-lg-4">
          <h4 class="d-flex justify-content-between align-items-center mb-3">
            <span class="text-primary">您的购物车</span>
            <span class="badge bg-primary rounded-pill">2</span>
          </h4>
          <ul class="list-group mb-3">
            <li class="list-group-item d-flex justify-content-between">
              <div>
                <h6 class="my-0">爱因斯坦质能方程啤酒杯</h6>
                <small class="text-muted">数量：1</small>
              </div>
              <span class="text-muted">￥49.9</span>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <div>
                <h6 class="my-0">泊松分布马克杯</h6>
                <small class="text-muted">数量：1</small>
              </div>
              <span class="text-muted">￥39.9</span>
            </li>
            <li class="list-group-item d-flex justify-content-between bg-light">
              <div class="text-success">
                <h6 class="my-0">运费优惠</h6>
              </div>
              <span class="text-success">−￥5</span>
            </li>
            <li class="list-group-item d-flex justify-content-between">
              <span>合计</span>
              <strong>￥84.8</strong>
            </li>
          </ul>
  
          <form class="border p-2 rounded-2">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="促销码">
              <button type="submit" class="btn btn-secondary">使用优惠码</button>
            </div>
          </form>
        </div>
      </div>
    </main>
  
    <footer class="my-5 pt-5 text-muted text-center text-small">
      <p class="mb-1">&copy; 2010–2021 前沿科技Artech All rights reserved</p>
      <ul class="list-inline">
        <li class="list-inline-item"><a href="javascript:void(0);">关于我们</a></li>
        <li class="list-inline-item"><a href="javascript:void(0);">联系我们</a></li>
        <li class="list-inline-item"><a href="javascript:void(0);">隐私协议</a></li>
      </ul>
    </footer>
  </div>
  <script src="../dist/jquery-3.6.0.min.js"></script>
  <script>
    $(function(){
      $('form').bind('submit', function(){
        let $this = $(this);
        if (!$this[0].checkValidity()) {
          $this.addClass('was-validated');
          return false;
        }
      })
    })
  </script>
</body>
</html>